<template>
  <ele-page flex-table>
    <!-- 搜索表单 -->
    <PageSearch :supplierList @search="reload" />

    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        v-model:selections="selections"
        row-key="id"
        :loadOnCreated="false"
        :columns="columns"
        :datasource="datasource"
        :export-config="exportConfig"
        :show-overflow-tooltip="true"
        highlight-current-row
        cache-key="StockEnterTable"
      >
        <template #toolbar>
        </template>

        <template #status="{ row }">
          <el-tag :type="getType(row.status)">{{ row.status_name }}</el-tag>
        </template>
      </ele-pro-table>
    </ele-card>
  </ele-page>
</template>

<script setup>
import { listSupplier } from '@/api/common'
import { ref } from 'vue'
import PageSearch from './components/search.vue'

defineOptions({
  name: 'StockEnter',
})

const { getType } = utils

const [supplierList] = utils.useGetList(listSupplier)

/** 表格实例 */
const tableRef = ref(null)

const exportConfig = reactive({
  // 导出全部时的全部数据源, Function 类型, 要返回数组格式的数据
  datasource: async ({ where, orders }) => {
    const res = await utils.get('/stockOutIn/list', { ...where, ...orders, is_all: 1 })
    return res.data
  },
  // 例如设置导出数据的选择框默认选中“全部数据”
  dataType: 'data',
  // 例如设置导出弹窗的更多属性
  modalProps: { title: '出入库记录 - 导出', width: '800px' },
  // 例如设置导出默认的文件名
  fileName: `出入库记录`,
  // 例如设置导出前的钩子函数
  beforeExport: (params) => {
    console.log(params)
    return true
  },
})

/** 表格列配置 */
const columns = ref([
  {
    type: 'index',
    label: '序',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'type_name',
    label: '类型',
    width: 100,
    align: 'center',
  },
  {
    prop: 'product_name',
    label: '商品名称',
    minWidth: 160,
    align: 'center',
  },
  {
    prop: 'product_code',
    label: '商品编码',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'price',
    label: '价格',
    minWidth: 80,
    align: 'center',
  },
  {
    prop: 'num',
    label: '数量',
    minWidth: 80,
    align: 'center',
  },
  {
    prop: 'unit',
    label: '单位',
    minWidth: 80,
    align: 'center',
  },
  // {
  //   prop: 'mch_name',
  //   label: '平台',
  //   minWidth: 100,
  //   align: 'center',
  // },
  {
    prop: 'supplier_name',
    label: '货主',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'warehouse_name',
    label: '仓库',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'wl_name',
    label: '库位',
    minWidth: 100,
    align: 'center',
  },
  // {
  //   prop: 'order_type_name',
  //   label: '订单类型',
  //   minWidth: 120,
  //   align: 'center',
  // },
  {
    prop: 'order_sn',
    label: '订单号',
    width: 180,
    align: 'center',
  },
  {
    prop: 'create_time',
    label: '出入库时间',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
    width: 160,
    showOverflowTooltip: false,
  },
])

/** 表格选中数据 */
const selections = ref([])

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  let fileName = '出入库记录'
  if (where.start_date) {
    fileName += where.start_date.replaceAll('-', '')
  }
  if (where.end_date) {
    if (where.start_date) {
      fileName += '-'
    }
    fileName += where.end_date.replaceAll('-', '')
  }
  exportConfig.fileName = fileName
  return utils.get('/stockOutIn/list', { ...where, ...orders, page, limit })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}
</script>
